<template>
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px',height:navbarHeight, backgroundColor: navBgColor }">
        <!-- 返回按钮 -->
        <view class="left-btn" @click="handleBack" v-if="showBack">
            <text class="back-icon">←</text>
            <text class="back-text" v-if="showBackText">返回</text>
        </view>

        <view class="nav-title">
            <slot v-if="slotTitle" name="title"></slot>
            <!-- 标题区域 -->
            <view v-else :style="{ color: titleColor }">
                {{ title }}
            </view>
        </view>


        <!-- 右侧菜单 -->
        <view class="right-menu">
            <slot name="right"></slot>
            <view class="menu-item" v-for="(item, index) in rightMenu" :key="index" @click="item.onClick">
                <text class="menu-icon" :style="{ color: titleColor }">{{ item.icon }}</text>
                <view class="menu-badge" v-if="item.badge">{{ item.badge }}</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import {ref, onMounted, defineProps, defineEmits, useSlots} from 'vue';
    import {handleGetCurSys} from "@/utils/utils";

    // 组件 props 定义
    const props = defineProps({
        // 导航标题
        title: {
            type: String,
            default: ''
        },
        // 是否显示返回按钮
        showBack: {
            type: Boolean,
            default: true
        },
        // 是否显示返回文本
        showBackText: {
            type: Boolean,
            default: false
        },
        // 标题颜色
        titleColor: {
            type: String,
            default: '#333333'
        },
        // 导航栏背景色
        navBgColor: {
            type: String,
            default: '#ffffff'
        },
        // 右侧菜单配置
        rightMenu: {
            type: Array as () => Array<{
                icon: string;
                badge?: string | number;
                onClick: () => void;
            }>,
            default: () => []
        }
    });

    //判断是否使用插槽
    const slotTitle = !!useSlots().title;
    console.log(useSlots(),"qqqqqqqqqqqqqqqq");

    // 组件事件
    const emit = defineEmits(['back']);

    // 状态栏高度（适配不同机型）
    let statusBarHeight = ref(0);//状态高度
    let navbarHeight = ref('');//顶部导航栏高度

    onMounted(() => {
        const curSys = handleGetCurSys();
        let addHeaderHeight = 0;//导航栏主体高度
        let addStatusBarHeight = 0;//添加状态高度
        if(curSys == 'mp-weixin'){
            addHeaderHeight = 44
            addStatusBarHeight = 10
        }else if(curSys == 'web' || curSys == 'app'){
            addHeaderHeight = 54
        }else{
            addHeaderHeight = 24
        }
        const headerHeight = uni.getSystemInfoSync().statusBarHeight + addHeaderHeight;
        navbarHeight.value = `${headerHeight}px`
        statusBarHeight.value = addStatusBarHeight;
    });

    // 处理返回逻辑
    const handleBack = () => {
        emit('back');
        // 获取当前页面栈
        const pages = getCurrentPages();
        if (pages.length > 1) {
            // 有上一页则返回
            uni.navigateBack({ delta: 1 });
        } else {
            // 无上一页则跳转到首页
            uni.switchTab({ url: '/pages/index/index' });
        }
    };
</script>

<style lang="less" scoped>
    // 全局变量
    @back-icon-size: 20px;
    @title-font-size: 18px;
    @menu-icon-size: 22px;

    .custom-navbar {
        position: fixed;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        z-index: 999;

        // 左侧返回按钮
        .left-btn {
            position: absolute;
            left: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;

            .back-icon {
                font-size: @back-icon-size;
                color: v-bind(titleColor);
                margin-right: 4px;
            }

            .back-text {
                font-size: 14px;
                color: v-bind(titleColor);
            }
        }

        // 标题
        .nav-title {
            font-size: @title-font-size;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 60%;
        }

        // 右侧菜单
        .right-menu {
            position: absolute;
            right: 16px;
            display: flex;
            align-items: center;
            gap: 16px;

            .menu-item {
                position: relative;
                cursor: pointer;

                .menu-icon {
                    font-size: @menu-icon-size;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .menu-badge {
                    position: absolute;
                    top: -4px;
                    right: -6px;
                    background-color: #ff4d4f;
                    color: #fff;
                    font-size: 11px;
                    padding: 1px 4px;
                    border-radius: 8px;
                    min-width: 16px;
                    text-align: center;
                }
            }
        }
    }


</style>
